<template>
    <PopUps :bgIndex="1000" :boxIndex="1001" widthMy='60%'  height-my="78%">
        <div class="popups-box">
            <div class="header">
                <div class="header-top">
                    <h3>{{ props.popTitle }}</h3>
                    <i class="iconfont icon-icon-cross-empty" @click="closePopUps"></i>
                </div>
                <div class="headerMain">
                    <el-form ref="formRef" :inline="true" :model="popUpsForm" :rules="rules" class="demo-form-inline">
                        <el-form-item :prop="item.name" :label="item.label" v-for="(item, index) in popUpsFormLabel"
                            :key="index" :style="{ 'min-width': `${item.minWidth}'!important'` }">
                            <!-- 输入框 -->
                            <el-input v-model="popUpsForm[item.name]" clearable v-if="!item.type || item.type == 'input'" :disabled="item.disabled || props.disabled"/>
                            <!-- 下拉选框 -->
                            <el-select v-model="popUpsForm[item.name]" clearable v-if="item.type == 'select'" :disabled="props.disabled">
                                <el-option :label="item1.label" :value="item1.value" v-for="(item1, index) in item.client"
                                    :key="index" />
                            </el-select>
                            <!-- 日期选框 -->
                            <el-date-picker v-else-if="item.type == 'picker'" v-model="popUpsForm[item.name]" type="date" :disabled="props.disabled"
                                placeholder="请输入日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="main">
    
                <div class="mainContent">
            
                        <el-form ref="formRef1" :rules="rules1" :inline="true" :model="stockroomForm" class="demo-form-inline">
                        <el-form-item :prop="item.name" :label="item.label" v-for="(item, index) in stockroomFormLabel"
                            :class="item.itemClassName" :key="index"
                            :style="{ 'min-width': `${item.minWidth}'!important'` }">
                            <!-- 输入框 -->
                            <el-input v-model="stockroomForm[item.name]" clearable :disabled="props.disabled"
                                v-if="!item.type || item.type == 'input'" />
                            <!-- 下拉选框 -->
                            <el-select v-model="stockroomForm[item.name]" clearable v-else-if="item.type == 'select'" :disabled="props.disabled">
                                <el-option :label="item1.label" :value="item1.value" v-for="(item1, index) in item.client"
                                    :key="index" />
                            </el-select>
                            <!-- 文本域 -->
                            <el-input v-model="stockroomForm[item.name]" type="textarea"  :disabled="props.disabled"
                                v-else-if="item.type == 'textarea'" />
                        </el-form-item>

                    </el-form>
                    <div class="btn">
                        <el-button v-if="props.defindFlag" type="primary" @click="onSubmit(formRef,formRef1)" class="submit">{{ props.popTitle.slice(0,2) }}</el-button>
                        <el-button type="primary" @click="closePopUps" class="reset">取消</el-button>
                    </div>
                </div>
            </div>
        </div>
    </PopUps>
</template>
<script setup>
import PopUps from '@/components/My/PopUps';
import { reactive, ref, defineEmits, watch,defineProps } from 'vue'

import { ElMessage, ElMessageBox } from 'element-plus'
const emit = defineEmits(['popUpsFlase'])
const formRef = ref(null)
const formRef1 = ref(null)
let props = defineProps(['popTitle','disabled','defindFlag','PopData'])
// 表单
let popUpsForm = ref({
    outsourcingId: '后台生成',      // 外协商编号
    projectName: '',      // 项目名称
    outsourcingDate: '',    // 外协商日期
    applicationPerson: '',      // 申请人
    outsourcingName: '',       // 外协商名称
    outsourcingContent: '',       // 外协内容
    contractId: '',       // 合同编号
    deptName: '',       // 部门
    applicationDate: '',       // 申请日期
    costType: '',       // 成本类别
})
// 表单数据标题
let popUpsFormLabel = ref([
    {
        name: 'outsourcingId',
        label: '外协商编号',
        disabled: true
    },
    {
        name: 'projectName',
        label: '项目名称',
    },
    {
        name: 'outsourcingDate',
        label: '外协商日期',
        type: 'picker',
        minWidth: '120px'
    },
    {
        name: 'applicationPerson',
        label: '申请人',
    },
    {
        name: 'outsourcingName',
        label: '外协商名称',
        type: 'select',
        client: [
            {
                label: '外协商1',
                value: '0'
            },
            {
                label: '外协商2',
                value: '1'
            },
            {
                label: '外协商3',
                value: '2'
            }
        ]
    },
    {
        name: '外协内容',
        label: '外协内容',
        minWidth: '120px'
    },
    {
        name: 'contractId',
        label: '合同编号'
    },
    {
        name: 'deptName',
        label: '部门',
        type: 'select',
        client: [
            {
                label: '部门1',
                value: '0'
            },
            {
                label: '部门2',
                value: '1'
            },
            {
                label: '部门3',
                value: '2'
            }
        ]
    },
    {
        name: 'applicationDate',
        label: '申请日期',
        type: 'picker'
    },
    {
        name: 'costType',
        label: '成本类别',
        type: 'select',
        client: [
            {
                label: '成本1',
                value: '0'
            },
            {
                label: '成本2',
                value: '1'
            },
            {
                label: '成本3',
                value: '2'
            }
        ]
    },
])

// 入库明细表单
let stockroomForm = ref(
    {
        paymentMoney: '',       // 付款金额
        paymentMethods: '',       // 付款方式
        remarks: '',       // 备注
    }
)
// 入库明表单数据标题
let stockroomFormLabel = ref([
    {
        name: 'paymentMoney',
        label: '付款金额',
    },
    {
        name: 'paymentMethods',
        label: '付款方式',
    },
    {
        name: 'remarks',
        label: '备注',
        type: 'textarea',
        itemClassName: 'remarks',
    },
])
// 入库信息校验
const rules = reactive({
    projectName: [
        {
            required: true,
            message: '项目名称',
            trigger: 'change',
        }
    ],
    outsourcingDate: [
        {
            required: true,
            message: '外协商日期',
            trigger: 'change',
        },
    ],
    applicationPerson: [
        {
            required: true,
            message: '申请人',
            trigger: 'change',
        },
    ],
    outsourcingName: [
        {
            required: true,
            message: '外协商名称',
            trigger: 'change',
        },
    ],
    outsourcingContent: [
        {
            required: true,
            message: '外协内容',
            trigger: 'change',
        },
    ],
    deptName: [
        {
            required: true,
            message: '部门',
            trigger: 'change',
        },
    ],
    applicationDate: [
        {
            required: true,
            message: '申请日期',
            trigger: 'change',
        },
    ],
    costType: [
        {
            required: true,
            message: '成本类别',
            trigger: 'change',
        },
    ],
})
// 底部校验
const rules1 = reactive({
    paymentMoney: [
        {
            required: true,
            message: '付款金额',
            trigger: 'change',
        }
    ],
    paymentMethods: [
        {
            required: true,
            message: '付款方式',
            trigger: 'change',
        },
    ],
})


// 新增
const onSubmit = (formRef,formRef1) => {
    ElMessageBox.confirm(
        '确认'+props.popTitle+'吗?',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
        }
    ).then(async () => {
        if (!formRef&&formRef1) return
        let isrules = await formRef.validate((valid, fields) => {
            if (valid) {
                return true
            } else {
                return false
            }
        })
        let isrules1 = await formRef1.validate((valid, fields) => {
            if (valid) {
                return true
            } else {
                return false
            }
        })
        if(isrules&& isrules1){
            // 请求接口
            console.log(popUpsForm.value,tableData.value,stockroomForm.value);
        }
    })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '已取消',
            })
        })

}
// 关闭
const closePopUps = () => {
    emit('popUpsFlase', false)
}

</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.el-input__wrapper {
    --el-select-width: 220px;
}

:deep(.el-form-item) {
    width: 250px;
}

:deep(.el-form-item__label) {
    width: 150px;
    text-align: right;
}

@mixin publicH3 {
    font-weight: 550;
    position: relative;
    font-size: 16px !important;

    &::after {
        content: '';
        width: 5px;
        height: 20px;
        background-color: #1947FF;
        border-radius: 5px;
        position: absolute;
        left: -15px;
        top: 0px;
    }
}

@mixin titlePadding {
    padding: 25px 25px 25px 45px;
}

@mixin pubilcForm {
    :deep(.el-form-item) {
        margin-right: 30px !important;
    }

    :deep(.el-form-item__label) {
        font-size: 14px;
    }

    :deep(.el-input__wrapper) {
        width: 132px;
    }

    :deep(.el-date-editor--datetimerange) {
        width: 240px;
    }

    :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
        font-size: 15px !important;
    }
}

.popups-box {
    max-height: 650px;
    overflow-y: scroll;

    .header {
        .header-top {
            @include titlePadding;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0px;
            background-color: #fff;
            z-index: 2023;
            h3 {
                @include publicH3;
            }

            .iconfont {
                color: #666;
                font-size: 27px;
            }
        }

        .headerMain {
            .demo-form-inline {
                @include pubilcForm;
            }
        }
    }

    .main {
        .mainContent {
            padding: 20px;

            .remarks {
                width: 400px;
            }
     
            .demo-form-inline {
                margin-top: 20px;
                @include pubilcForm;

            }

            .btn {
                text-align: right;
                .el-button {
                    width: 50px;
                    height: 25px;
                    font-size: 12px;
                }
                .reset {
                    background-color: #E4E9FC;
                    color: #333;
                    border: none;
                }
            }
        }
    }
}
</style>